<template>
  <n-config-provider
    :theme="getTheme"
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme-overrides="getThemeOverrides"
  >
    <app-provider>
      <router-view v-slot="{ Component }">
        <transition name="animation-shocking-from-the-right">
          <keep-alive :include="asyncRouteStore.getKeepAliveComponentList">
            <suspense>
              <component :is="Component" />
              <template #fallback><global-loading /></template>
            </suspense>
          </keep-alive>
        </transition>
      </router-view>
    </app-provider>
  </n-config-provider>
</template>
<script setup lang="ts">
import { zhCN, dateZhCN, darkTheme } from 'naive-ui'
import type { GlobalThemeOverrides } from 'naive-ui'
import { AppProvider } from '@/components/application'
import { useDesignSettingStoreOut } from '@/stores/modules/designSetting'
import { lighten } from '@/utils'
import { useAsyncRouteStoreOut } from '@/stores/modules/asyncRoute'

const designStore = useDesignSettingStoreOut()
const asyncRouteStore = useAsyncRouteStoreOut()
const getTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined))
const componentConfig = computed(() => designStore.getComponentConfig).value

const getThemeOverrides = computed(() => {
  const appTheme = designStore.appTheme
  const lightenStr = lighten(appTheme, 6)
  const themeOverrides: GlobalThemeOverrides = {
    common: {
      primaryColor: appTheme,
      primaryColorHover: lightenStr,
      primaryColorPressed: lightenStr,
      primaryColorSuppl: appTheme
    },
    LoadingBar: {
      colorLoading: appTheme
    },
    Scrollbar: {
      color: componentConfig!.scrollbarColor,
      colorHover: componentConfig!.scrollbarColorHover
    }
  }
  return themeOverrides
})
</script>
<style lang="scss">
@import url('styles/index.scss');
</style>
